<template>
  <div class="dashboard-container">
    <el-row>
      <el-col :span="11" style="margin:16px;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>系统变量</span>
          </div>
          <el-row :gutter="8" class="directory-item">
            <el-col :span="8">
              <span class="directory-item-text">店铺下单上限：</span>
            </el-col>
            <el-col :span="6">
              <span v-if="!editOrderLimit" class="directory-item-text">{{ orderLimit }}</span>
              <el-input v-if="editOrderLimit" v-model="orderLimit" class="directory-item-input" type="number" placeholder="请输入内容" />
            </el-col>
            <el-col :span="6">
              <el-button v-if="!editOrderLimit" size="mini" type="primary" icon="el-icon-edit" @click="handleEditOrderLimit" />
              <el-button v-if="editOrderLimit" size="mini" type="success" icon="el-icon-check" @click="handleSaveOrderLimit" />
            </el-col>
          </el-row>
          <el-row :gutter="8" class="directory-item">
            <el-col :span="8">
              <span class="directory-item-text">店铺超出金额：</span>
            </el-col>
            <el-col :span="6">
              <span v-if="!editThreshold" class="directory-item-text"> {{ threshold }} % </span>
              <el-input v-if="editThreshold" v-model="threshold" class="directory-item-input" type="number" placeholder="请输入内容" />
            </el-col>
            <el-col :span="6">
              <el-button v-if="!editThreshold" size="mini" type="primary" icon="el-icon-edit" @click="handleEditThreshold" />
              <el-button v-if="editThreshold" size="mini" type="success" icon="el-icon-check" @click="handleSaveThreshold" />
            </el-col>
          </el-row>
          <el-row :gutter="8" class="directory-item">
            <el-col :span="8">
              <span class="directory-item-text">店铺下单间隔：</span>
            </el-col>
            <el-col :span="6">
              <span v-if="!editTimeInterval" class="directory-item-text"> {{ timeInterval }} 秒 </span>
              <el-input v-if="editTimeInterval" v-model="timeInterval" class="directory-item-input" type="number" placeholder="请输入内容" />
            </el-col>
            <el-col :span="6">
              <el-button v-if="!editTimeInterval" size="mini" type="primary" icon="el-icon-edit" @click="handleEditTimeInterval" />
              <el-button v-if="editTimeInterval" size="mini" type="success" icon="el-icon-check" @click="handleSaveTimeInterval" />
            </el-col>
          </el-row>
          <el-row :gutter="8" class="directory-item">
            <el-col :span="8">
              <span class="directory-item-text">获取商品区间：</span>
            </el-col>
            <el-col :span="6">
              <span v-if="!editRunRangeLt" class="directory-item-text"> {{ runRangeLt }} 元 </span>
              <el-input v-if="editRunRangeLt" v-model="runRangeLt" class="directory-item-input" type="number" placeholder="请输入数字" />
            </el-col>
            <el-col :span="6">
              <el-button v-if="!editRunRangeLt" size="mini" type="primary" icon="el-icon-edit" @click="handleEditRunRangeLt" />
              <el-button v-if="editRunRangeLt" size="mini" type="success" icon="el-icon-check" @click="handleSaveRunRangeLt" />
            </el-col>
          </el-row>
          <el-row :gutter="8" class="directory-item">
            <el-col :span="8">
              <span class="directory-item-text">订单超时：</span>
            </el-col>
            <el-col :span="6">
              <span v-if="!editOrderTimeout" class="directory-item-text"> {{ orderTimeout }} 秒 </span>
              <el-input v-if="editOrderTimeout" v-model="orderTimeout" class="directory-item-input" type="number" placeholder="请输入数字" />
            </el-col>
            <el-col :span="6">
              <el-button v-if="!editOrderTimeout" size="mini" type="primary" icon="el-icon-edit" @click="handleEditOrderTimeout" />
              <el-button v-if="editOrderTimeout" size="mini" type="success" icon="el-icon-check" @click="handleSaveOrderTimeout" />
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="11" style="margin:16px;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>账号管理</span>
          </div>
          <a target="_blank" href="http://www.pvp1199.com/work.php"><el-button type="primary"> 导入买手小号 </el-button></a>
          <!-- <el-button type="primary" @click="test"> 测试 </el-button> -->
        </el-card>
        <p />
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>数据管理</span>
          </div>
          <el-button type="primary" @click="clearStoreAndGoods"> 清理店铺和商品 </el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getGoods } from '@/api/test'
import { getThreshold, getStoreOrderLimitDefault, getGoodsTimeInterval, saveThreshold, saveStoreOrderLimitDefault, saveGoodsTimeInterval, getRunRangeLt, saveRunRangeLt, getOrderTimeout, saveOrderTimeout } from '@/api/directory'
import { clarUnusedStoreAndGoods } from '@/api/clear'
import { Message } from 'element-ui'

export default {
  name: 'Dashboard',
  data() {
    return {
      editOrderLimit: false,
      orderLimit: '',
      editThreshold: false,
      threshold: '',
      editTimeInterval: false,
      timeInterval: '',
      runRangeLt: '',
      editRunRangeLt: false,
      orderTimeout: '',
      editOrderTimeout: false
    }
  },
  computed: mapGetters({
    roles: 'roles',
    rootUserId: 'id'
  }),
  created() {
    getThreshold().then(resp => (this.threshold = resp.data))
    getStoreOrderLimitDefault().then(resp => (this.orderLimit = resp.data))
    getGoodsTimeInterval().then(resp => (this.timeInterval = resp.data))
    getRunRangeLt().then(resp => (this.runRangeLt = resp.data))
    getOrderTimeout().then(resp => (this.orderTimeout = resp.data))
  },
  methods: {
    isAdmin() { return this.roles.includes('admin') },
    handleEditOrderLimit() {
      if (this.isAdmin()) {
        this.editOrderLimit = true
      } else {
        Message.error('只有管理员才能更改')
      }
    },
    handleEditThreshold() {
      if (this.isAdmin()) {
        this.editThreshold = true
      } else {
        Message.error('只有管理员才能更改')
      }
    },
    handleEditTimeInterval() {
      if (this.isAdmin()) {
        this.editTimeInterval = true
      } else {
        Message.error('只有管理员才能更改')
      }
    },
    handleEditRunRangeLt() {
      if (this.isAdmin()) {
        this.editRunRangeLt = true
      } else {
        Message.error('只有管理员才能更改')
      }
    },
    handleEditOrderTimeout() {
      if (this.isAdmin()) {
        this.editOrderTimeout = true
      } else {
        Message.error('只有管理员才能更改')
      }
    },
    handleSaveOrderLimit() {
      saveStoreOrderLimitDefault(this.orderLimit).then(resp => {
        this.editOrderLimit = false
      })
    },
    handleSaveThreshold() {
      saveThreshold(this.threshold).then(resp => {
        this.editThreshold = false
      })
    },
    handleSaveTimeInterval() {
      saveGoodsTimeInterval(this.timeInterval).then(resp => {
        this.editTimeInterval = false
      })
    },
    handleSaveRunRangeLt() {
      saveRunRangeLt(this.runRangeLt).then(resp => {
        this.editRunRangeLt = false
      })
    },
    handleSaveOrderTimeout() {
      this.orderTimeout = this.orderTimeout ? this.orderTimeout : 0
      saveOrderTimeout(this.orderTimeout).then(resp => {
        this.editOrderTimeout = false
      })
    },
    test() {
      getGoods()
    },
    clearStoreAndGoods() {
      if (this.isAdmin()) {
        this.$confirm('此操作将永久删除没有绑定用户的商店和商品, 继续操作？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => clarUnusedStoreAndGoods().then(resp => Message.success('操作成功')))
      } else {
        Message.error('只有管理员才能更改')
      }
    }
  }
}
</script>

<style scoped>
.directory-item{
  padding-bottom: 8px;
}
.directory-item-text{
  height: 36px;
  line-height: 36px;
}
.directory-item-input{
  width: 100px;
}
</style>
